<template>
	<view class="mine">
		<view>
			<view class="mine_title">
				<image class="user_avatar" :src="userInfo.avatarUrl" mode="aspectFit	"></image>
				<view class="user_name">{{ userInfo.nickName }}</view>
			</view>
			<view class="user_Info">
				<view class="card_item">
					<view class="title">我们相遇</view>
					<view class="content">
						<text>{{ meetingDay || 0 }}</text>
						天
					</view>
				</view>
				<view class="card_item">
					<view class="title">投递邮件</view>
					<view class="content">
						<text>{{ fmailCount || 0 }}</text>
						封
					</view>
				</view>
				<view class="card_item">
					<view class="title">命时已存在</view>
					<view class="content">
						<text>{{ existDay || 0 }}</text>
						小时
					</view>
				</view>
				<view class="card_item">
					<view class="title">拥有用户</view>
					<view class="content">
						<text>{{ userCount || 0 }}</text>
						人
					</view>
				</view>
			</view>
			<view class="mine_list">
				<u-cell-group>
					<u-cell-item icon="reload" title="同步" :arrow="false"><u-switch slot="right-icon" v-model="isUpload" @change="handleSwitchUpload"></u-switch></u-cell-item>
					<u-cell-item icon="setting-fill" title="设置" @click="handleShowSetting"></u-cell-item>
					<u-cell-item icon="question-circle" title="关于" bg-color="initial" @click="handleAboutClick"></u-cell-item>
				</u-cell-group>
			</view>
		</view>
		<u-action-sheet :list="list" v-model="showSetting" :mask-close-able="false" @click="handleSetListClick"></u-action-sheet>
		<u-toast ref="uToast" />
		<view class="btn_wrap">
			<!-- <u-button v-if="isLogin" class="btn_item">退出登录</u-button> -->
			<u-button v-if="!isLogin" class="btn_item" @getuserinfo="handleGetUserInfo" open-type="getUserInfo">登录</u-button>
		</view>
	</view>
</template>

<script>
import Tool from '@/common/tool.js';
import dayjs from 'dayjs';
export default {
	data() {
		return {
			isUpload: false, // 是否上传配置
			isLogin: true,
			meetingDay: '', // 账号注册时长
			existDay: '', // 应用创建时间
			userCount: 0,
			fmailCount: 0, // 发邮件数量
			showSetting: false,
			userInfo: {
				nickName: '请登录'
			},
			list: [
				{
					text: '清除-晨之曦',
					fontSize: 28,
					subText: '将清除您设置的出生日期'
				},
				{
					text: '清除-暮之霭',
					fontSize: 28,
					subText: '将清除您设置的预估时长'
				}
			]
		};
	},
	onShow() {
		this.initUserInfo();
		this.getOtherInfo();
	},
	methods: {
		initUserInfo() {
			// 初始化用户信息
			const that = this;
			uni.checkSession({
				success() {
					that.isLogin = true;
					that.getUserInfo();

					// 如果没有openId则重新获取
					if (!Tool.getStorage('openId', 'USER')) {
						that.handleGetUserInfo();
					}
				},
				fail() {
					that.isLogin = false;
				}
			});
		},
		getUserInfo() {
			// 获取用户详情
			const that = this;
			uni.getUserInfo({
				success(res) {
					if (res.userInfo) {
						that.userInfo = res.userInfo;
						Tool.saveStorage('userInfo', res.userInfo);
						that.handleUserLogin();
					}
				}
			});
		},
		handleGetUserId(code) {
			//获取用户ID
			const that = this;
			this.getUserInfo();
			this.$u.api
				.getSessionId({
					code
				})
				.then(res => {
					if (res.data?.openid) {
						that.isLogin = true;
						Tool.saveStorage('openId', res.data.openid, 'USER');
						Tool.saveStorage('sessionKey', res.data.session_key, 'USER');
						return Promise.resolve(res.data.openid);
					}
					return Promise.reject();
				})
				.then(userId => {
					that.handleUserLogin(userId);
				});
		},
		handleSwitchUpload() {
			Tool.saveStorage('isUpload', this.isUpload, 'SETTING');
		},
		handleUserLogin(userId) {
			// 请求云端用户信息
			userId = userId || Tool.getStorage('openId', 'USER');
			if (!userId) {
				return;
			}
			this.$u.api.login(userId).then(res => {
				this.fmailCount = res.data.fmailCount;
				this.meetingDay = this.formatDateToNow(res.data.createdDate);
			});
		},
		handleGetUserInfo(res) {
			// 登录操作
			const that = this;
			uni.login({
				success(res) {
					that.handleGetUserId(res.code);
				},
				fail(err) {
					console.log('err', err);
				}
			});
		},
		formatDateToNow(date, type = 'd') {
			if (!date) {
				return 0;
			}
			var old = dayjs(date);
			const now = dayjs();
			return now.diff(old, type) + 1;
		},
		getOtherInfo() {
			this.$u.api.getPool(['originDate', 'userCount']).then(({ data }) => {
				this.existDay = this.formatDateToNow(data.originDate, 'h');
				this.userCount = data.userCount;
			});
		},
		handleAboutClick() {
			uni.navigateTo({
				url: '../../subMine/pages/AboutMe/AboutMe'
			});
		},
		handleShowSetting() {
			this.showSetting = true;
		},
		handleSetListClick(index) {
			switch (index) {
				case 0: {
					Tool.removeStorage('LIFE_BIRTCH_DATE');
					this.$refs.uToast.show({
						title: '清除-晨之曦',
						type: 'success'
					});
					break;
				}
				case 1: {
					Tool.removeStorage('LIFE_DEAD_DATE');
					this.$refs.uToast.show({
						title: '清除-暮之霭',
						type: 'success'
					});
					break;
				}
			}
		}
	}
};
</script>

<style lang="scss">
.mine {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 25rpx;
	min-height: 100vh;

	.mine_title {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
		margin-bottom: 40rpx;

		.user_name {
			font-size: 50rpx;
		}

		.user_avatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 30rpx;
			margin-left: 30rpx;
			background-image: url(@/static/images/logo.png);
			background-size: cover;
		}
	}

	.user_Info {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin-bottom: 30rpx;

		.card_item {
			width: 45%;
			padding: 15rpx;
			border: 1rpx solid #ebeef5;
			box-shadow: 0 0 3rpx 0rpx #ebeef5;
			border-radius: 4rpx;
			margin-bottom: 30rpx;
			.title {
				font-size: 22rpx;
				color: $u-tips-color;
				margin-bottom: 10rpx;
			}

			.content {
				text-align: center;
				font-size: 30rpx;
				padding-bottom: 5rpx;
				color: $u-content-color;

				text {
					font-size: 42rpx;
					margin-right: 10rpx;
				}
			}
		}
	}

	.mine_list {
		padding: 15rpx;
	}

	.btn_wrap {
		margin-top: 80rpx;
		margin-bottom: 60rpx;

		.btn_item {
			display: block;
			width: 200rpx;
			margin: 0 auto;
		}
	}
}
</style>
